<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>06 设置或获取属性</title>
    <style>
        .box1 {
            width: 220px;
            height: 32px;
            line-height: 32px;
            border-radius: 6px;
            border: 1px solid #999;
            outline: none;
            text-indent: 20px;
        }
        
        button {
            width: 120px;
            height: 32px;
            line-height: 32px;
            background-color: skyblue;
            color: #ffffff;
            border: none;
            border-radius: 10px;
            text-align: center;
            cursor: pointer;
            outline: none;
        }
    </style>
</head>

<body>
    <div>
        <input type="number" id="ipt" class="box1" id2="kky" placeholder="请输入密码" value="123456">
        <button type="button" id="btn">确定</button>
    </div>

    <script>
        var ipt = document.getElementById('ipt');
        var btn = document.getElementById('btn');

        btn.onclick = function() {
            var inputValue = ipt.value;
            console.log('inputValue:', inputValue);
        }
    </script>
</body>

</html>